<template>
    <div class="dayin">
      <div>
        <el-button
          type="primary"
          @click="print()"
          class="dayin_btn"
          style="margin-right: 10px"
          >打印预览</el-button
        >
      </div>
      <div ref="print" id="printArea">
        <template v-for="itemsw in dayinlist">
          <div :key="itemsw.id">
            <h3 style="text-align: center">产品流程卡</h3>
            <table
              class="table_tbs"
              style="border-collapse: collapse; margin-top: 10px"
              cellspacing="0"
            >
              <tr>
                <td class="td_1">订单号</td>
                <td class="td_1" style="width:100px;">产品</td>
                <td class="td_1">型号</td>
                <td class="td_1">规格</td>
                <td class="td_1">尺寸</td>
                <td class="td_1">颜色</td>
                <td class="td_1">品牌</td>
                <td class="td_1">业主地址</td>
                <td class="td_1">客户</td>
                <td class="td_1">是否发货</td>
                <td class="td_1">件数</td>
                <td class="td_1" style="width:300px;">备注</td>
              </tr>
              <tr v-for="items,index in itemsw.order_second" :key="index">
                  <td :rowspan="itemsw.order_second.length" v-if="index==0">{{itemsw.order_number}}</td>
                  <td>{{items.product?items.product.product_name:""}}</td>
                  <td>{{items.model_number?items.model_number.model_number:""}}</td>
                  <td>{{items.specification?items.specification.specification:""}}</td>
                  <td>{{items.work_size}}</td>
                  <td>{{items.color?items.color.color:""}}</td>
                  <td>{{items.brand}}</td>
                  <td>{{itemsw.customer_name}}</td>
                  <td>{{itemsw.customer?itemsw.customer.customer_name:""}}</td>
                  <td>{{itemsw.is_fahuo==1?"是":"否"}}</td>
                  <td>{{items.num}}</td>
                  <td>{{items.remark}}</td>
              </tr>
            </table>
            <div style="page-break-after: always"></div>
          </div>
        </template>
      </div>
    </div>
  </template>
  
  <script>
  import { setDeliveryStatus } from "@/api/product/index";
  export default {
    data() {
      return {
        dayin_name: "安徽布诺美",
        is_je: 1,
        name_list: [
          {
            name: "安徽布诺美(无金额)",
            value: 2,
          },
          {
            name: "安徽布诺美(有金额)",
            value: 1,
          },
        ],
        dayinlist: [],
        strDate: "",
        bottoms: {
          logistics: "",
          arrears: "",
          warehouse_name: "",
          num: 0,
          company_name: "",
          company_phone: "",
          receivables: 0,
          balance: "",
          qiankuan: "",
          contact_phone: "",
          customer_address: "",
          customer_name: "",
          order_date: "",
          caozuoyuan: "",
          caozuoyuan_phone: "",
        },
        Infomation: "",
        order_num: "",
      };
    },
    mounted() {
      this.dayinlist = JSON.parse(this.$route.query.data);
      console.log(this.dayinlist);
      this.Infomation = this.$store.getters.Infomation.company_name;
    },
    methods: {
      text_get(val) {
        console.log(val);
        if (val) {
          return val.replace(/[\r\n]/g, "<br/>");
        } else {
          return "";
        }
      },
      // 输入的金额进行大写转换
      transformation(val) {
        var fraction = ["角", "分"];
        var digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
        var unit = [
          ["元", "万", "亿"],
          ["", "拾", "佰", "仟"],
        ];
        var head = val < 0 ? "欠" : "";
        val = Math.abs(val);
        var s = "";
        for (var i = 0; i < fraction.length; i++) {
          s += (
            digit[Math.floor((val * 100 * Math.pow(10, i)) / 10) % 10] +
            fraction[i]
          ).replace(/零./, "");
        }
  
        s = s || "";
        val = Math.floor(val);
        for (var i = 0; i < unit[0].length && val > 0; i++) {
          var p = "";
          for (var j = 0; j < unit[1].length && val > 0; j++) {
            p = digit[val % 10] + unit[1][j] + p;
            val = Math.floor(val / 10);
          }
          s = p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
        }
        return (
          head +
          s
            .replace(/(零.)*零元/, "元")
            .replace(/(零.)+/g, "零")
            .replace(/^整$/, "零元")
        );
      },
      formatterTime(data) {
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
      },
      set_DeliveryStatus() {
        let ids_s = [];
        this.dayinlist.forEach((item) => {
          ids_s.push(item.id);
        });
        setDeliveryStatus({ ids: ids_s }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.print();
          }
        });
      },
      /**
       * 获取当前时间
       */
      currentTime() {
        var date = new Date();
        var year = date.getFullYear(); //月份从0~11，所以加一
        let month = date.getMonth();
        console.log("month", month);
        var dateArr = [
          date.getMonth() + 1,
          date.getDate(),
          date.getHours(),
          date.getMinutes(),
          date.getSeconds(),
        ];
        //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
        for (var i = 0; i < dateArr.length; i++) {
          if (dateArr[i] >= 1 && dateArr[i] <= 9) {
            dateArr[i] = "0" + dateArr[i];
          }
        }
        this.strDate =
          year +
          "/" +
          dateArr[0] +
          "/" +
          dateArr[1] +
          " " +
          dateArr[2] +
          ":" +
          dateArr[3] +
          ":" +
          dateArr[4];
      },
      print() {
        this.$print(this.$refs.print);
      },
    },
  };
  </script>
  <style scoped>
  .dayin {
    padding: 25px;
    box-sizing: border-box;
  }
  
  /* 
  长 75mm
  宽 45mm */
  #printArea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 auto;
  }
  
  #printArea > div:first-child {
    margin-top: 0px;
  }
  
  #printArea table {
    width: 100%;
    border-collapse: collapse;
  }
  
  #printArea table th {
    color: #333;
    padding: 5px 0;
    font-size: 26px;
  }
  
  #printArea table {
    border: 1px solid #000;
  }
  
  #printArea table td,
  table th {
    border: 1px solid #000;
    text-align: center;
    padding: 0;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
  }
  
  #printArea table tr td {
    min-height: 35px;
    line-height: 35px;
  }
  
  /* #printArea table thead th {
    background-color: #0a8fa1;
  } */
  
  #printArea table tr th,
  table tr td {
    padding: 5px 12px;
  }
  
  .procedure {
    word-wrap: break-word;
  }
  
  .dayin_btn {
    background: #0a8fa1;
    border: none;
    margin: 20px 0;
  }
  
  .list_order {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
  }
  
  .div_span {
    margin-bottom: 5px;
  }
  
  .div_span > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
  }
  
  .table_tb tr {
    display: flex;
  }
  
  .table_tb tr td {
    font-size: 14px;
    display: block;
    height: auto;
    word-break: break-all;
  }
  
  .input_border {
    border: 1px solid rgba(0, 0, 0, 0.2);
    height: 35px;
  }
  
  @media print {
    .input_border {
      border: none;
      height: 35px;
    }
    .dayin {
      padding: 25px;
      box-sizing: border-box;
    }
  
    /* 
  长 75mm
  宽 45mm */
    #printArea {
      width: 100%;
      padding: 2px;
      box-sizing: border-box;
      margin: 0 auto;
    }
  
    #printArea > div:first-child {
      margin-top: 0px;
    }
  
    #printArea table {
      width: 100%;
      border-collapse: collapse;
    }
  
    #printArea table th {
      color: #333;
      padding: 5px 0;
      font-size: 26px;
    }
  
    #printArea table {
      border: 1px solid #000;
    }
  
    #printArea table td,
    table th {
      border: 1px solid #000;
      text-align: center;
      padding: 0;
      margin: 0;
      padding: 5px;
      box-sizing: border-box;
    }
  
    #printArea table tr td {
      /* min-height: 35px; */
      /* line-height: 35px; */
    }
  
    /* #printArea table thead th {
    background-color: #0a8fa1;
  } */
  
    #printArea table tr th,
    table tr td {
      padding: 5px 12px;
    }
  
    .procedure {
      word-wrap: break-word;
    }
  
    .dayin_btn {
      background: #0a8fa1;
      border: none;
      margin: 20px 0;
    }
  
    .list_order {
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
    }
  
    .div_span {
      margin-bottom: 5px;
    }
  
    .div_span > div {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 10px;
    }
  
    .table_tb tr {
      display: flex;
    }
  
    .table_tb tr td {
      font-size: 14px;
      display: block;
      height: auto;
      word-break: break-all;
    }
  }
  </style>
  